﻿<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />

	<style type="text/css">
		.treeView li li {margin-left:24px;}
		.toggle {cursor:pointer;vertical-align:middle;margin-right:7px;display:inline-block;border:1px solid #555;text-align:center;height:12px;width:12px;line-height:11px;background-color:#f8f8f8;color:Blue;}
		.treeView, .treeView ul {padding:0;margin:0;} .treeView li {margin-left:8px;list-style-type:none;padding:2px;}
	</style>
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>Tree view: using recursive nested {{for}} tags.</h3>

<ul id="foldersList" class="treeView"></ul>

<script id="folderTemplate" type="text/x-jsrender">
	<li>
		{{if ~hasContent() link=true}}
			<span class="toggle">{{:expanded ? "-" : "+"}}</span>
		{{/if}}
		<span>{{:name}}</span>
	</li>
	{{if expanded link=true}}
		<li>
			<ul>{{for folders tmpl="folderTmpl" link=true/}}</ul>
		</li>
	{{/if}}
</script>

<script type="text/javascript">

 /* Hierarchy of named folders */
var rootFolder = {
	name: "Categories",
	folders: [
		{ name: "Drama", folders: [
			{ name: "Courtroom" },
			{ name: "Political" }
		]},
		{ name: "Classic", folders: [
			{ name: "Musicals", folders: [
				{ name: "Jazz"},
				{ name: "R&B/Soul"}
			]},
		]}
	]
};

/* Declare the functions for getting the items and subfolders, etc. */
$.views.helpers({
	hasContent: function() {
		var folder = this.data;
		return folder.expanded || folder.folders && folder.folders.length;
	}
});

$.templates( "folderTmpl", "#folderTemplate" );

$.link.folderTmpl( rootFolder, "#foldersList" )
	.on( "click", ".toggle", function() {
		/* Toggle expanded property on data, then refresh rendering */
		var view = $.view( this ).parent;
		view.data.expanded = !view.data.expanded;
		view.refresh();
	})

</script>
</body>
</html>
